<script lang="ts" setup>
import defaultBanner from '@/home/assets/home/join-banner.png';
import { useAppStore } from '@/settings/stores/index'
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  des: {
    type: String,
    default: '',
  },
  pic: {
    type: String,
    default: '',
  },
  cursor: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(['join', 'close']);
const appStore = useAppStore();
const communityInfo = appStore.config;

const handleClick = () => {
  emit('join', true);
}
const handleClose = () => {
  emit('close');
}
</script>

<template>
  <div class="mx-auto w-290 rounded-6 bg-white text-hex-292929 shadow-[0_0_16px_0_rgba(0,0,0,0.10)]">
    <div class="relative">
      <img :data-src="props.pic || defaultBanner" :alt="props.title || communityInfo.name" class="lozad block h-140 w-full rounded-6 object-cover">
      <img src="../assets/mask2.svg" class="absolute bottom--1 block h-15 w-full object-cover">
    </div>
    <h2 class="mt-20 px-20 text-center text-balance text-16 font-semibold leading-22">{{ props.title || communityInfo.name }}</h2>
    <p class="mt-16 px-20 text-center text-16 text-hex-575757 leading-22">{{ props.des || $t('common.communityCard.popup.invite') }}</p>
    <div class="mt-24 h-56 border-t-1 border-#f0f0f5 text-16 font-400 leading-22">
      <button class="h-full w-50% border-r-1 border-#f0f0f5 bg-transparent text-#adadad" @click="handleClose">{{ $t('common.communityCard.popup.cancel') }}</button>
      <button class="h-full w-50% bg-transparent text-#3d7cfa" @click="handleClick">{{ $t('common.communityCard.popup.join') }}</button>
    </div>
  </div>
</template>

<style scoped lang="scss">
</style>
